import React from "react";
import defaultImg from "../../assets/error.png";
import {
  Card,
  Breadcrumb,
  Form,
  Radio,
  Select,
  DatePicker,
  Button,
  Table,
  Tag,
  Modal,
} from "antd";
import { SearchOutlined, ExclamationCircleOutlined } from "@ant-design/icons";
import { Link } from "react-router-dom";
import Channel from "../compoment/channel";
import { getArticles, delArticle } from "../../api/article";

export default class ArticleList extends React.Component {
  ArticleStatus = [
    { id: -1, name: "全部" },
    { id: 0, name: "草稿" },
    { id: 1, name: "待审核" },
    { id: 2, name: "审核通过" },
    { id: 3, name: "审核失败" },
  ];
  state = {
    statu: "",
    channel: [],
    artiList: [],
  };
  reqparms = {};
  handle = (e) => {
    this.setState({
      statu: e.target.value,
    });
  };
  columns = [
    {
      title: "封面",
      render(data) {
        if (data.cover.type === 0) {
          return (
            <img src={defaultImg} alt="" style={{ width: 200, height: 120 }} />
          );
        }
        return (
          <img
            src={data.cover.images[0]}
            alt=""
            style={{ width: 200, height: 120 }}
          />
        );
      },
    },
    {
      title: "标题",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "状态",
      dataIndex: "status",
      render: (status) => {
        return (
          <Tag>
            {" "}
            {this.ArticleStatus.find((item) => item.id === status).name}
          </Tag>
        );
      },
    },
    {
      title: "发布时间",
      dataIndex: "pubdate",
      key: "pubdate",
    },
    {
      title: "阅读数",
      dataIndex: "read_count",
      key: "read_count",
    },
    {
      title: "品论述",
      dataIndex: "comment_count",
      key: "comment_count",
    },

    {
      title: "点赞数",
      dataIndex: "like_count",
      key: "like_count",
    },
    {
      title: "操作",
      dataIndex: "id",
      render: (id) => {
        return (
          <Button
            icon={<SearchOutlined />}
            onClick={() => {
              this.delect(id);
            }}
          ></Button>
        );
      },
    },
  ];
  delect = (id) => {
    Modal.confirm({
      title: "是否删除",
      cancelText: "取消",
      okText: "确认",
      icon: <ExclamationCircleOutlined />,
      content: "你确定要删除文章吗",
      onOk: async () => {
        console.log(id);
        await delArticle(id);
      },
    });
  };
  //筛选按钮
  onFinish = ({ state, channel_id, time }) => {
    if (state === -1) {
      delete this.reqparms.status;
    } else {
      this.reqparms.status = state;
    }
    if (channel_id !== undefined) {
      this.reqparms.channel_id = channel_id;
    } else {
      delete this.reqparms.channel_id;
    }
    if (time) {
      this.reqparms.begin_pubdate = time[0]
        .startOf("day")
        .format("YYYY-MM-DD HH:mm:ss");
      this.reqparms.end_pubdate = time[1]
        .endOf("day")
        .format("YYYY-MM-DD HH:mm:ss");
    } else {
      delete (this.reqparms.begin_pubdate && this.reqparms.end_pubdate);
    }
    this.getArticleList();
  };
  // ArticleList
  render() {
    const { total_count, results } = this.state.artiList;
    return (
      <div>
        diy-5
        <Card
          title={
            <Breadcrumb>
              <Breadcrumb.Item>
                <Link to="/home">首页</Link>
              </Breadcrumb.Item>
              <Breadcrumb.Item>评论列表</Breadcrumb.Item>
            </Breadcrumb>
          }
        >
          <Form
            onFinish={this.onFinish}
            initialValues={{ state: 2, channel_id: "0" }}
          >
            <Form.Item label="状态" name="state">
              <Radio.Group onChange={this.handle} value={this.state.statu}>
                {this.ArticleStatus.map((item) => (
                  <Radio value={item.id} key={item.id}>
                    {item.name}
                  </Radio>
                ))}
              </Radio.Group>
            </Form.Item>
            <Form.Item label="频道" name="channel_id">
              <Channel />
            </Form.Item>
            <Form.Item label="日期" name="time">
              <DatePicker.RangePicker />
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                筛选
              </Button>
            </Form.Item>
          </Form>
        </Card>
        <Card title={`展示出来的数据${total_count}`}>
          <Table
            columns={this.columns}
            dataSource={results}
            rowKey="id"
            pagination={{ position: ["bottomCenter"] }}
          />
        </Card>
      </div>
    );
  }
  async componentDidMount() {
    this.getArticleList();
  }

  async getArticleList() {
    const res = await getArticles(this.reqparms);
    console.log(res.data);
    this.setState({
      artiList: res.data,
    });
  }
}
